<ui:composition template="../WEB-INF/templates/template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:tc="http://java.sun.com/jsf/composite/components">

	<ui:define name="content-title">
		<h:outputLabel>Shops</h:outputLabel>
	</ui:define>	 
	
	<ui:define name="content">
		<f:event type="preRenderView" listener="#{productBean.initShopDetail}" />
		
		<p:panel header="Shop details">
			<h:panelGrid columns="2">
				<p:panel>
					<p:graphicImage value="/resources/images/logos/chicken.gif"  height="100px" width="150px" />
				</p:panel>
				<p:panel style="width:680px; height:110px;background-color: #c4c4c4; background-image:url('../resources/images/logos/barbers.png');">
						<h:panelGrid columns="2" style="margin-top:75px">
							<p:outputLabel value="#{productBean.product.shop}" style="margin-left:480px"/>  
	        				<p:rating value="4" readonly="true" style=""/> 
						</h:panelGrid>						
				</p:panel>
			</h:panelGrid>
			<h:form style="margin-left:690px">  
			    <p:growl id="messages"/>  
			      
			    <p:menuButton value="Mail">  
			        <p:menuitem value="Inbox" update="messages"  icon="ui-icon-disk"/>  
			        <p:menuitem value="Outbox" update="messages"  icon="ui-icon-arrowrefresh-1-w"/>  
			        <p:menuitem value="Delete" icon="ui-icon-close"  ajax="false"/>  
			        <p:separator />  
			        <p:menuitem value="Homepage" url="http://www.primefaces.org" icon="ui-icon-extlink"/>  
			    </p:menuButton>  
			    <p:menuButton value="Shop Settings">  
			        <p:menuitem value="Save" update="messages"  icon="ui-icon-disk"/>  
			        <p:menuitem value="Update" update="messages"  icon="ui-icon-arrowrefresh-1-w"/>  
			        <p:menuitem value="Delete" icon="ui-icon-close"  ajax="false"/>  
			        <p:separator />  
			        <p:menuitem value="Homepage" url="http://www.primefaces.org" icon="ui-icon-extlink"/>  
			    </p:menuButton> 
			</h:form>						
		</p:panel>
		<h:form>
			<p:dataGrid  value="#{productBean.productListPerShop}" var="product" emptyMessage="This Shop is Empty" columns="5"  
				        rows="12" paginator="true"  
				        paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
				        rowsPerPageTemplate="9,12,15">  
				
						<p:panel header="#{product.name} : #{product.price} #{product.shop.currency.symbol}" style="text-align:center">
							<p:graphicImage value="/resources/images/products/#{product.imageName}" style="width:140px; height:100px;"/>
							<br />
							<h:outputText value="#{product.brand}" />
							<br/>
							<h:outputText value="#{product.deal}" />
							<br/>
							<p:commandButton value="view" action="#{productBean.navigateToProduct(product)}">
								<f:setPropertyActionListener target="#{beanStore.selectedProduct}" value="#{product}" />
							</p:commandButton>
						</p:panel>
							
			</p:dataGrid>
			<p:commandButton value="Add Product to shop" action="#{productBean.navigateToCreateProduct}"/>		
		</h:form>
	</ui:define>
	
</ui:composition>